<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 
            给子组件添加一个自定义属性 属性的值是要传递的数据
            自定义属性不能使用驼峰命名法
        
        -->
        <child :msg-data="msg" :text="content"></child>
    </div>
    <script src="./js/vue.js"></script>
    <script>

        Vue.component('child', {
            // props用来接收子组件标签上的自定义属性的值 props可以通过数组的方法接收数据
            // props也可以用对象接受数据
            // props: ['msgData', 'text'],
            props: {
                msgData: {
                    type: String, // 定义要接受的数据的类型,
                    // required: true, // 定义数据是否必须传递 true表示必须传递
                    default: '德玛西亚' // 设置默认值 默认值在属性未传递时生效
                },

                text: { 
                    type: Object,
                    default: () => { // 当数据时数组或者对象的时候需要用工厂函数返回一个默认值
                        return {}
                    }
                }
            },
            template: `
                <div>这是个子组件 {{msgData}} {{text}}</div>
            `
        })


        new Vue({
            el: '#app',
            data: {
                msg: undefined,

                content: {
                    title: '活着'
                }
            }
        })
    </script>
</body>
</html>